<template>
    <article class="container">

      <span class="refresh">
        <el-link class="publishNotice_main_header_refresh" :underline="false" type="primary" @click="handleChange">
          <i class="el-icon-refresh">刷新</i>
        </el-link>
      </span>

      <el-link
        type="primary"
        class="change"
        :underline="false"
      >
        <span v-if="!isChange" @click="isChange=true;">更改</span>
        <span v-else @click="handleChange">确定</span>
      </el-link>

      <div v-if="!isChange">
        <div class="info">
          <span style="font-weight: bold;">检测日期：&nbsp;</span>
          <span>{{ queryParam.date }}</span>
          <span style="font-weight: bold; margin-left: 5px;">当前检测点：&nbsp;</span>
          <span>{{ currentHospitalName }}</span>
        </div>
      </div>
      <div v-else>
        <!-- 检测点 -->
        <el-select
          class="select"
          v-model="currentHospital"
          filterable
          placeholder="请选择检测点"
        >
          <el-option
            v-for="item in hospitals"
            :key="item.hospitalId"
            :label="item.name"
            :value="item"
          >
            <span style="float: left; margin-right: 20px;">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
          </el-option>
        </el-select>

        <!-- 检测日期 -->
        <el-date-picker
          class="select"
          v-model="date"
          type="date"
          placeholder="选择检测日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>


      </div>
    </article>
</template>

<script>
import { dateFormat } from '@/utils/timeUtils.js'
export default {
    name: "QueryHeader",
    props: {
        // item: Object
        queryParam: Object
    },
    data(){
        return {
            isChange: false,
            currentHospital: null,
            date: null,

            pickerOptions: {
              disabledDate(time) {
                return time.getTime() < Date.now();
              },
              shortcuts: [
                {
                  text: "明天",
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() + 3600 * 1000 * 24);
                    picker.$emit("pick", date);
                  },
                },
                {
                  text: "一周后",
                  onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                    picker.$emit("pick", date);
                  },
                },
              ],
            },
        }
    },
    computed: {
      hospitals(){return this.$store.state.hospital.hospitals;},
      currentHospitalName(){
        if (this.currentHospital == null) {
          return "全部";
        }
        return this.currentHospital.name;
      }
    },
    methods: {
      refresh: function(){
        this.$store.dispatch("hospital/refresh_hospital"); 
      },
      handleChange: function(){
        this.queryParam.hospitalId = this.currentHospital==null? null : this.currentHospital.hospitalId;
        this.queryParam.date = this.date==null? null:dateFormat(new Date(this.date), "yyyy-MM-dd");
        this.isChange = false;
        this.$emit('handleQuery');
      },
    },
    created() {
      if (this.hospitals == null) {
        this.refresh();
      }
    }

}
</script>

<style scoped lang="scss">

.container {
  background: #FFFFFF;
  border-bottom: 1px solid #DCDFE6;
  height: 50px;
  line-height: 50px;
  position: relative;
  z-index: 50;
  
  .change {
    float: right;
    margin-right: 5px;
    font-size: 16px;
  }

  .refresh {
    float: right;
    margin-right: 5px;
  }

  .info {
    float: right;
    margin-right: 10px;
  }
  

  .select {
    float: right;
    width: 30%;
    margin-right: 5px;
  }
}

</style>